<script setup lang="ts" name="GrandSon">//setup语法糖
import { ref, reactive, toRefs, toRef, computed, watch, watchEffect, defineExpose, defineProps, withDefaults, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, inject } from 'vue'
let name = ref('zhangsan') //ref响应式(RefImpl对象): 基本类型(数字,字符串), 对象(层级不深)
let cars = ref({ brand: '奔驰', price: 100 }) //ref对象(层级不深)
let car = reactive({ brand: '奔驰', price: 100 }) //reactive相应式(Proxy代理函数): 只能对象数组(层级深)
let { brand, price } = toRefs(car) //toRefs: 将reactive中k-v全转为ref,解构赋值为响应式(ObjectRefImpl)
let brands = toRef(car, 'brand') //toRef: 将reactive中某个k-v转为ref
let computedResult = computed({ //计算属性(ref响应式)
  get() {
  },
  set(val) {
  }
})
const stopWatch = watch(name, (newValue, oldValue) => { //监视ref基本类型,不写.value

})
watchEffect(() => { //自动监视:不用指定监视谁,用到就监视,立即监视(一上来就监视)

})
function generalMethod() { //一般方法

}

defineProps(['car', 'toy', 'updateA']) //$attrs接收爷传孙

let cara = inject('car', {brand:'未知', price: 0})
let {money, updateMoney} = inject('moneys', {money: '默认值', updateMoney:(param:number)=>{}}) //inject爷传孙(默认值)
</script>

<template> <!--template不编译-->
  <div class="component-name"> <!--vue3无需根标签-->
    孙组件
  </div>
  <div class="component-name">
    $attrs接收爷传孙:{{ car }} <!--$attrs接收爷传孙-->
  </div>
  <button @click="updateA('人形机器人')">$attrs孙传爷</button> <!--$attrs孙传爷-->

  <button @click="updateMoney(6)">provide-injext孙传爷</button> <!--provide-injext孙传爷-->
  inject爷传孙(不打扰子):{{ cara }}{{ money }}
</template>

<style lang="less" scoped>
//less嵌套写法,scoped域:样式只对当前组件有效
.component-name {}
</style>